<template>
    <div style="height: 100%">
        <el-row style="border-bottom: 1px solid #c9c9c9" class="row-with-border">
            <el-card>
                <div style="height: calc(100vh - 300px)">
                    <vxe-table
                        :data="dataSource"
                        :key="tableKey"
                        @cell-click="cellClickEvent"
                        :row-class-name="rowClassName"
                        @sort-change="handleSelectionChange2"
                        @filter-change="handleFilterChange"
                        @resizable-change="handleResizeChange"
                        v-table-top="paging.currentPage"
                        border
                        ref="xTable"
                        size="mini"
                        style="width: 100%"
                        height="100%"
                        :auto-resize="true"
                        :resizable-config="{ minWidth: '90' }"
                        :filter-config="{ remote: true }"
                        :sort-config="{ remote: true }"
                        show-header-overflow
                        :row-style="{ height: '35px' }"
                        :cell-style="{ padding: '0px' }"
                        highlight-current-row
                    >
                        <vxe-column field="nSerialNo" title="操作序号" min-width="120" sortable show-overflow align="center" resizable :filters="[{ data: '' }]">
                            <template #filter="{ $panel, column }">
                                <el-input
                                    class="my-input"
                                    type="type"
                                    v-for="(option, index) in column.filters"
                                    :key="index"
                                    v-model="option.data"
                                    @input="$panel.changeOption($event, !!option.data, option)"
                                />
                            </template>
                        </vxe-column>
                        <vxe-column
                            field="cOperateType"
                            title="操作类型"
                            sortable
                            min-width="120"
                            show-overflow
                            align="center"
                            :filters="[
                                { label: '关闭待办', value: '1' },
                                { label: '转回待办', value: '2' },
                                { label: '生成待办', value: '3' },
                                { label: '修改待办', value: '4' },
                            ]"
                            resizable
                        >
                            <template slot-scope="scope">
                                <span :style="getStyle(scope.row.cOperateType)">
                                    {{ typeEnum[scope.row['cOperateType']]}}
                                </span>
                            </template>
                        </vxe-column>
                        <vxe-column field="cStlossEventDetailId" title="待办明细编号" min-width="150" sortable show-overflow align="center" resizable>
                        </vxe-column>
                        <vxe-column field="ruleId" title="规则编号" min-width="120"  show-overflow align="center" resizable>
                        </vxe-column>
                        <vxe-column field="ruleName" title="待办规则名称" min-width="150"  show-overflow align="center" resizable>
                        </vxe-column>
                        <vxe-column field="dCtTime" title="待办生成时间"  min-width="150"  show-overflow align="center" resizable>
                            <template slot-scope="scope">
                                <span> {{ dateFormatter(scope.row.dCtDate, scope.row.dCtTime) }}</span>
                            </template>
                        </vxe-column>
                        <vxe-column field="cEventTag" title="待办标签" min-width="120" sortable show-overflow align="center" resizable>
                    </vxe-column>
                        <vxe-column field="cEventContent" title="待办备注" min-width="120" sortable show-overflow align="center" resizable :filters="[{ data: '' }]">
                            <template #filter="{ $panel, column }">
                                <el-input
                                    class="my-input"
                                    type="type"
                                    v-for="(option, index) in column.filters"
                                    :key="index"
                                    v-model="option.data"
                                    @input="$panel.changeOption($event, !!option.data, option)"
                                />
                            </template>
                        </vxe-column>
                        <vxe-column field="cOpUser" title="操作人" min-width="120" sortable :filters="[{ data: '' }]" show-overflow resizable>
                            <template #filter="{ $panel, column }">
                                <el-input
                                    class="my-input"
                                    type="type"
                                    v-for="(option, index) in column.filters"
                                    :key="index"
                                    v-model="option.data"
                                    @input="$panel.changeOption($event, !!option.data, option)"
                                />
                            </template>
                        </vxe-column>
                        <vxe-column field="dOpTime" title="操作时间" min-width="120" sortable show-overflow align="center" resizable>
                            <template slot-scope="scope">
                                <span> {{ dateFormatter(scope.row.dOpDate, scope.row.dOpTime) }}</span>
                            </template>
                        </vxe-column>

                    </vxe-table>
                </div>
            </el-card>
        </el-row>
        <div class="block">
            <el-pagination
                background
                @current-change="currentChange"
                layout="total, prev, pager, next"
                :total="dataSource.length"
                :page-size="paging.pageSize"
                :current-page.sync="paging.currentPage"
            >
            </el-pagination>
        </div>
        <el-row>
            <el-card v-if="this.visible">
                <div>"{{this.title}}"详情:</div>
               <div>
                   <ul>
                       <li v-for="(item, index) in list" :key="index" style=" cursor:pointer; color: #9a6e3a">{{ item }}</li>

                   </ul>
               </div>
            </el-card>
        </el-row>
        <el-row class="card-box">
            <el-card>
                <div class="btns">
                    <el-button @click="$emit('close-tab', data.name)">关闭</el-button>
                </div>
            </el-card>
        </el-row>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import RiskIconButton from '@/common/components/risk-icon-button.vue';
import RiskTrantable from '@/common/components/risk-trantable.vue';
import RiskTable from '@/common/components/risk-table.vue';
import DictionConstUtil, { SGU_CACHE, objToArr } from '@/utils/diction-const-util';
import Invest from '@/common/dict/invest';
import { UUID, NumberToWords, getConfigItem, dateFormat, timeFormat } from '@/utils/tools';
import { getUser } from '@/utils/user-util';
import { mixins } from 'vue-class-component';
import RiskEmitter from '@/common/mixis/risk-emitter.vue';

export interface pages {
    total?: number;
    pageSize?: number;
    currentPage?: number;
    totalPage?: number;
}

@Component({
    name: 'Records',
    components: {
        RiskIconButton,
        RiskTrantable,
        RiskTable
    },
})
export default class Records extends mixins(RiskEmitter) {
    @Prop() data: any;
    private dataSource: any[] = []; // 操作记录表格数据
    private tableKey: number = 1;
    private paging: pages = { currentPage: 1, pageSize: 19979797, totalPage: 0, total: 0 };
    private paging2: pages = { currentPage: 1, pageSize: 19979797, totalPage: 0, total: 0 };
    private isZoomed: boolean = false;
    private hoverRowIndex: number | null = null;
    private iconDom: any = null; // 图标dom
    private changeIconCols: any[] = [1, 3];
    private visible: boolean = false;
    private sort: string = '';
    private cOperateTypes: any[] = [];
    private cStlossEventDetailId:string = '';
    private cEventContent:string = '';
    private cOpUser:string = '';
    private nSerialNo:any = null;
    private zoomIn() {
        this.isZoomed = !this.isZoomed;
       // this.dispatch('Disposition', 'zoomIn', this.isZoomed);
    }
    private list: any[] = [];
    private title: string = '';
    private ThresholdType: any = {
        '0': '无',
        '1': '上升',
        '2': '下降',
        '3': '跟踪',
        '4': '恢复',
    } // 触警类型
    private typeEnum: any = {
        '1': '关闭待办',
        '2': '转回待办',
        '3': '生成待办',
        '4': '修改待办',
    }; // 处理状态
    private tableSelection: any[] = []; // 表格勾选数据

    // 监听父组件带进来的基础数据
    @Watch('data', { immediate: true, deep: true })
    watchData(newData) {
        if (newData) {
            if (newData.content) {
                let data = JSON.parse(JSON.stringify(newData.content));
            }
        }
    }

// 状态样式
    private getStyle(value: string): any {
        let color = '';
        color = value == '0' ? 'red' : value == '1' ? 'green' : '';
        return { color: color };
    }

    // 时间处理
    private dateFormatter(date, time) {
        if (date || time) {
            return (date ? dateFormat(date, true) : '') + ' ' + (time ? timeFormat(time, true) : '');
        }
        return '--';
    }

    /**
     * @description: 排序触发
     * @author: guoyunfei
     * @date: 2023/11/29 22:08:11
     */

    private handleSelectionChange2(column) {
        let { order, property } = column;
        if (order) {
            order = order.split('ending')[0];
        } else {
            order = '';
        }
        let obj = {
            nSerialNo: 'N_SERIAL_NO',
            cOperateType: 'C_OPERATE_TYPE',
            cStlossEventDetailId: 'C_STLOSS_EVENT_DETAIL_ID',
            cEventContent: 'C_EVENT_CONTENT',
            cOpUser: 'C_OP_USER',
            cEventTag: 'C_EVENT_TAG',
            dCtTime: 'D_CT_DATE,D_CT_TIME',
            dOpTime: 'D_OP_DATE,D_OP_TIME',
            ruleId: 'TO_NUMBER(REGEXP_REPLACE(C_RULE_ID,\'[^0-9]\',\'\'))',
            ruleName: 'RULE_NAME',
        };

        this.sort = obj[property] + ' ' + order;
        this.getDispositionList();
    }
    /**
     * @name: 名称
     * @description: 过滤触发
     * @author: guoyunfei
     * @date: 2023/11/29 22:09:07
     */

    private handleFilterChange({ field, values, datas }): void {
        if (['nSerialNo', 'cStlossEventDetailId', 'cEventContent', 'cOpUser'].includes(field)) {
            this[field] = datas.join('');
        } else if (field === 'cOperateType') {
            this['cOperateTypes'] = values;
        } else {
            this[field] = values;
        }

        this.getDispositionList();
    }
    private handleResizeChange(options: any) {
        this.$nextTick(() => {
            (this.$refs.xTable as any).resetColumn(false);
        });
    }

    // 点击行获取操作详情
    private cellClickEvent({row, rowIndex}) {
        this.visible = true;
        this.list = [];
        let concent = '';
        const previousRowData = this.dataSource[rowIndex + 1];
        this.title = this.typeEnum[row.cOperateType];
        if (!(row.cEventContent == previousRowData.cEventContent) && !previousRowData.cEventContent) {
             concent = '新增待办备注:' + row.cEventContent
            this.list.push(concent);
        } else if (!(row.cEventContent == previousRowData.cEventContent) && previousRowData.cEventContent) {
            concent = '修改待办备注:' + previousRowData.cEventContent + '--->' + row.cEventContent
            this.list.push(concent);
        }

        if (!(row.cEventTag == previousRowData.cEventTag) && !previousRowData.cEventTag) {
            concent = '新增待办标签:' + row.cEventTag
            this.list.push(concent);
        } else if (!(row.cEventTag == previousRowData.cEventTag) && previousRowData.cEventTag) {
            concent = '修改待办标签:' + previousRowData.cEventTag + '--->' + row.cEventTag
            this.list.push(concent);
        }
    }
    private rowClassName({ $rowIndex }: { $rowIndex: number }) {
        return {
            'row-hover-shadow': $rowIndex === this.hoverRowIndex
        };
    }

    // 表格勾选事件
    private handleSelectionChange(val, event): void {
        // 阻止事件传播
        event.stopPropagation();
        this.tableSelection = val.selection;
    }

    private currentChange(val): void {
        this.paging.currentPage = val;
    }
    private currentChange2(val): void {
        this.paging2.currentPage = val;
    }
    // 获取操作记录
    private getDispositionList() {
       // this.dataSource = JSON.parse(JSON.stringify(this.dataSourceTest));
        let val = JSON.parse(JSON.stringify(this.data.content));
        let url = '/htscamc/stopLossEvent/detail/operate/list'; // 操作记录
        let data = {
            cstlossEventDetailId: val.cStlossEventDetailId,
            cOperateTypes: this.cOperateTypes,
            ceventContent: this.cEventContent,
            nserialNo: this.nSerialNo,
            copUser: this.cOpUser,
            paging: this.paging,
            sort: this.sort,
        };
        this.$axios({ url, method: 'post', data }).then((res: any) => {
            this.dataSource = res.list;
            this.changeTable();
            this.paging.total = res.list.length;
            this.paging.totalPage = res.totalPage;
        });
    }

    changeTable() {
        this.$nextTick(() => {
            if (!this.iconDom) {
                this.iconDom = document.querySelectorAll('.vxe-icon--funnel');
                for (let i = 0; i < this.iconDom.length; i++) {
                    if (!this.changeIconCols.includes(i)) {
                        this.iconDom[i].className = 'vxe-filter--btn el-icon-search';
                    }
                }
            }
        });
    }

    // 回调函数
    addTabs(data: any, val: any) {
        let datas: any = {};
        datas.type = data;
        datas.value = val;

            this.dispatch('Disposition', 'addTables', datas);
    }

    async mounted() {
   this.getDispositionList();
    }
}
</script>

<style lang="scss" scoped>

.column-with-border {
    //border: 1px solid #ccc; /* 添加边框样式 */
    padding: 10px; /* 添加列之间的距离 */
}
.row-with-border {
    margin: -8px; /* 负边距用于抵消列的padding */
}
.row-with-flex {
    display: flex;
    align-items: center;
}

.column-with-flex {
    display: flex;
    align-items: center;
    justify-content: center;
}

.zoomed {
    position: fixed;
    top: 30px;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}
.btns {
    display: inline;
    float: right;
    padding-bottom: 20px;
}
</style>
